export function dynamicStyle1(oW: number, oH: number, ctx: any, analyser: AnalyserNode, songInfo: any){
    analyser.fftSize = 1024
    const frequencyBinCount = analyser.frequencyBinCount
    const output = new Uint8Array(frequencyBinCount)
    window.addEventListener('resize', () => {
        oW = window.innerWidth
        oH = window.innerHeight
    })
    //设置线条的颜色
    const color1 = ctx.createLinearGradient(oW / 2, oH / 2-10, oW / 2, oH / 2 - 150);
    color1.addColorStop(0, '#1E90FF');
    color1.addColorStop(.25, '#FF7F50');
    color1.addColorStop(.5, '#8A2BE2');
    color1.addColorStop(.75, '#4169E1');
    color1.addColorStop(1, '#00FFFF');
    const color2 = ctx.createLinearGradient(0, 0, oW, oH);
    color2.addColorStop(0, '#1E90FF');
    color2.addColorStop(.25, '#FFD700');
    color2.addColorStop(.5, '#8A2BE2');
    color2.addColorStop(.75, '#4169E1');
    color2.addColorStop(1, '#FF0000');
    const du = 2
    const R = 200
    const W = 2
    function drawSpectrum() {
        analyser.getByteFrequencyData(output);
        ctx.clearRect(0, 0, oW, oH);
        for (let i = 0; i < frequencyBinCount; i++) {
            const value = output[i] / 10;
            ctx.beginPath();
            ctx.lineWidth = W; 
            const Rv1 = (R -value);
            const Rv2 = (R +value);
            ctx.moveTo(( Math.sin((i * du) / 180 * Math.PI) * Rv1 + oW/2),-Math.cos((i * du) / 180 * Math.PI) * Rv1 + oH/2);
            ctx.lineTo( ( Math.sin((i * du) / 180 * Math.PI) * Rv2 + oW/2),-Math.cos((i * du) / 180 * Math.PI) * Rv2 + oH/2);
            ctx.strokeStyle = color1;//线条的颜色
            ctx.stroke();
        }
        ctx.beginPath()
        ctx.arc(oW/2, oH/2, 3*output[20]/4, 0, Math.PI * 2)
        ctx.strokeStyle = color2
        ctx.stroke()
        ctx.closePath()
        ctx.beginPath()
        ctx.arc(oW/2, oH/2, 3*output[200]/4, 0, Math.PI * 2)
        ctx.strokeStyle = color1
        ctx.stroke()
        ctx.closePath()
        //设置字体样式颜色
        ctx.font = "20px 华文楷体";
        ctx.fillStyle = color2;		// 设置颜色
        ctx.textAlign = "center";		// 设置水平对齐方式
        ctx.textBaseline = "middle";	// 设置垂直对齐方式
        // 绘制文字（参数：要写的字，x坐标，y坐标）
        ctx.fillText(songInfo.name, oW/2, oH/2);
        requestAnimationFrame(drawSpectrum);
    }
    drawSpectrum()
}
export function dynamicStyle2(oW: number, oH: number, ctx: any, analyser: AnalyserNode, songInfo: any){
    analyser.fftSize = 32
    //设置线条的颜色
    const color1 = ctx.createLinearGradient(oW / 2, oH / 2-10, oW / 2, oH / 2 - 150);
    color1.addColorStop(0, '#1E90FF');
    color1.addColorStop(.25, '#FF7F50');
    color1.addColorStop(.5, '#8A2BE2');
    color1.addColorStop(.75, '#4169E1');
    color1.addColorStop(1, '#00FFFF');
    const color2 = ctx.createLinearGradient(0, 0, oW, oH);
    color2.addColorStop(0, '#1E90FF');
    color2.addColorStop(.25, '#FFD700');
    color2.addColorStop(.5, '#8A2BE2');
    color2.addColorStop(.75, '#4169E1');
    color2.addColorStop(1, '#FF0000');
    const frequencyBinCount = analyser.frequencyBinCount
    const output = new Uint8Array(frequencyBinCount)
    const R = 100
    function drawSpectrum() {
        analyser.getByteFrequencyData(output);
        ctx.clearRect(0, 0, oW, oH);
        ctx.beginPath()
        for (let i = 0; i < 800; i++) {
            const value = output[i] / 10;
            const Rv1 = (R -value);
            const Rv2 = (R +value);
            const deg = i*(Math.PI / 180)
            ctx.lineTo(Math.sin(deg)*Rv1+500, -Math.cos(deg)*Rv1+200)
            ctx.strokeStyle = color1
            ctx.stroke()
        }
        ctx.closePath()
        requestAnimationFrame(drawSpectrum);
    }
    drawSpectrum()
}